<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 公共的头部 -->
      <PageTools showBefore>
        <template #before>
          <span>共{{ total }}条数据</span>
        </template>
        <template #after>
          <el-button type="danger" @click="ExportExcelSimple"
            >普通Excel导出</el-button
          >
          <el-button type="info" @click="ExportExcelMulti"
            >复杂表头excel导出</el-button
          >
          <el-button type="success" @click="$router.push('/import?type=user')"
            >excel导入</el-button
          >
          <el-button type="primary" @click="addUserFn">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 表格区域 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="80" label="序号">
        </el-table-column>
        <el-table-column prop="username" sortable label="姓名">
        </el-table-column>
        <el-table-column align="center" label="头像">
          <template slot-scope="{ row }">
            <el-avatar :src="row.staffPhoto" @click.native="showQRCode(row)">
              <img src="@/assets/common/head.jpg" />
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" sortable label="手机号">
        </el-table-column>
        <el-table-column prop="workNumber" sortable label="工号">
        </el-table-column>
        <el-table-column
          prop="formOfEmployment"
          :formatter="formatter"
          sortable
          label="聘用形式"
        >
        </el-table-column>
        <el-table-column prop="departmentName" sortable label="部门">
        </el-table-column>
        <el-table-column sortable label="入职时间">
          <template slot-scope="{ row }">
            <span>{{ row.timeOfEntry | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" width="180" label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)"> 查看 </el-button>
            <el-button type="text" size="small" @click="assignRoleFn(row)"> 角色 </el-button>
            <el-button
              @click.native.prevent="deleteRow(row)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-row type="flex" justify="end">
        <el-pagination
          layout="total, prev, pager, next"
          :page-size="size"
          :total="total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
    </div>
    <!-- 新增用户弹框 -->
    <addUser :visible.sync="dialogShow" @success="initData"></addUser>
    <!-- 二维码弹框 -->
    <el-dialog
      title="生成二维码"
      :visible.sync="dialogVisible"
      width="50%">
      <el-row type="flex" justify="center">
        <canvas ref="QRCode"></canvas>
      </el-row>
    </el-dialog>
    <!-- 分配角色弹框 -->
    <assignRole ref="assignRole" :visible.sync="assignRoleShow"></assignRole>
  </div>
</template>

<script>
import { userListApi, delUserApi } from '@/api/employees'
import Employees from '@/api/constant/employees'
import addUser from './components/add-user.vue'
import { formatDate } from '@/filters'
import QrCode from 'qrcode'
import assignRole from './components/assign-role'
export default {
  data() {
    return {
      tableData: [], // 存放员工列表数据
      page: 1, // 当前页数
      size: 5, // 每页数据条数
      total: 0, // 数据总条数
      dialogShow: false, // 控制新增用户弹框显示与隐藏
      dialogVisible: false, // 控制二维码弹框展示
      assignRoleShow: false // 控制分配角色弹框展示
    }
  },
  components: { addUser, assignRole },
  created() {
    this.initData()
  },
  methods: {
    // 给员工分配角色
    async assignRoleFn(row) {
      console.log(row);
      // 调用子组件获取角色列表方法
      await this.$refs.assignRole.getUserInfo(row.id)
      this.assignRoleShow = true
    },
    // 显示二维码
    async showQRCode(row) {
      this.dialogVisible = true
      await this.$nextTick()
      // QrCode.toCanvas方法参数：
      // 参数1：接收一个canvas标签对象
      // 参数2：设置要转换的字符
      QrCode.toCanvas(this.$refs.QRCode, row.staffPhoto)
    },
    // 普通Excel导出
    async ExportExcelSimple() {
      const excel = await import('@/vendor/Export2Excel')
      const headers = {
        手机号: 'mobile',
        姓名: 'username',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }

      // 表头tHeader:目标格式
      // ['手机号', '姓名', '入职日期', '聘用形式', '转正日期', ...]
      const tHeader = Object.keys(headers)
      // 表体data：目标格式
      // const data = [
      //   ['132414', 'zhansan', '', ...],
      //   ['132414', 'zhansan', '', ...],
      //   ['132414', 'zhansan', '', ...],
      // ]
      const { rows } = await userListApi({
        page: 1,
        size: this.total
      })
      console.log(rows)
      const data = []
      rows.forEach((item) => {
        const arr = []
        // 数据处理：arr目标 ['132414', 'zhansan', '', ...]
        tHeader.forEach((key) => {
          // 1. 通过headers[key]获取到表头中中文key对应的英文字段
          // 2. 通过item[header[key]]获取到rows中某一个行数据中某一个英文字段对应的value值
          // 3. 将获取到的value值放到arr中
          if (
            headers[key] === 'timeOfEntry' ||
            headers[key] === 'correctionTime'
          ) {
            // 判断如果是时间，需要格式化一下时间
            arr.push(formatDate(item[headers[key]]))
          } else if (headers[key] === 'formOfEmployment') {
            // 如果是聘用形式，转换成中文
            arr.push(this.formatter({ formOfEmployment: item[headers[key]] }))
          } else {
            arr.push(item[headers[key]])
          }
        })
        // 4. 将整理好的arr放到data中
        data.push(arr)
      })
      console.log(data)
      excel.export_json_to_excel({
        header: tHeader, //表头 必填
        data, //具体数据 必填
        filename: '员工列表', //非必填
        autoWidth: true, //非必填
        bookType: 'xlsx' //非必填
      })
    },
    // 复杂表头Excel导出
    async ExportExcelMulti() {
      const excel = await import('@/vendor/Export2Excel')
      const headers = {
        手机号: 'mobile',
        姓名: 'username',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }

      // 表头tHeader:目标格式
      // ['手机号', '姓名', '入职日期', '聘用形式', '转正日期', ...]
      const tHeader = Object.keys(headers)
      // 复杂表头合并
      const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
      const merges = ['A1:A2', 'B1:F1', 'G1:G2']
      // 表体data：目标格式
      // const data = [
      //   ['132414', 'zhansan', '', ...],
      //   ['132414', 'zhansan', '', ...],
      //   ['132414', 'zhansan', '', ...],
      // ]
      const { rows } = await userListApi({
        page: 1,
        size: this.total
      })
      console.log(rows)
      const data = []
      rows.forEach((item) => {
        const arr = []
        // 数据处理：arr目标 ['132414', 'zhansan', '', ...]
        tHeader.forEach((key) => {
          // 1. 通过headers[key]获取到表头中中文key对应的英文字段
          // 2. 通过item[header[key]]获取到rows中某一个行数据中某一个英文字段对应的value值
          // 3. 将获取到的value值放到arr中
          if (
            headers[key] === 'timeOfEntry' ||
            headers[key] === 'correctionTime'
          ) {
            // 判断如果是时间，需要格式化一下时间
            arr.push(formatDate(item[headers[key]]))
          } else if (headers[key] === 'formOfEmployment') {
            // 如果是聘用形式，转换成中文
            arr.push(this.formatter({ formOfEmployment: item[headers[key]] }))
          } else {
            arr.push(item[headers[key]])
          }
        })
        // 4. 将整理好的arr放到data中
        data.push(arr)
      })
      console.log(data)
      excel.export_json_to_excel({
        header: tHeader, //表头 必填
        data, //具体数据 必填
        filename: '员工列表', //非必填
        autoWidth: true, //非必填
        bookType: 'xlsx', //非必填
        multiHeader,
        merges
      })
    },
    // 新增用户
    addUserFn() {
      this.dialogShow = true
    },
    // 初始化员工列表数据
    async initData() {
      const { total, rows } = await userListApi({
        page: this.page,
        size: this.size
      })
      this.total = total
      this.tableData = rows
    },
    // 格式化聘用形式
    formatter(row) {
      // 导入聘用形式枚举数据
      const { hireType } = Employees
      // 过滤查找
      const arr = hireType.filter((item) => item.id === row.formOfEmployment)
      if (arr.length > 0) return arr[0].value
      return '未知'
    },
    // 处理分页页码变化逻辑
    handleCurrentChange(val) {
      this.page = val
      this.initData()
    },
    // 处理删除逻辑
    async deleteRow(row) {
      await this.$confirm('此操作将删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delUserApi(row.id)
      if (this.tableData.length === 1 && this.page > 1) this.page -= 1
      this.$message.success('删除成功')
      this.initData()
    }
  }
}
</script>

<style>
</style>